<template>
  <div class="page-container">
    <!-- 顶部区域 -->
    <header class="hero-section">
      <video class="hero-bg" autoplay loop muted playsinline>
        <source src="https://books-1251391448.cos.ap-beijing.myqcloud.com/shsg-service/bg.mp4" type="video/mp4">
      </video>
      <div class="hero-content">
        <h1 class="main-title">山海守门人</h1>
        <p class="subtitle">若见山鬼献果、精卫衔石，请代我将谢礼撒入归墟。</p>
        <button class="explore-btn" @click="scrollToSecondScreen">开始探索</button>
      </div>
    </header>

    <!-- 自媒体 -->
    <section class="platform-section">
      <h2 class="section-title">在这些平台 <span class="highlight">找到我</span></h2>
      <p class="section-desc">全网同名：山海守门人 | 微信：shjz-zq</p>
      <div class="platform-cards">
        <div class="platform-card" v-for="(m, index) in medias" :key="index">
          <img class="card-icon" :src="m.image" :alt="m.title">
          <div class="card-progress">{{ m.title }}</div>
        </div>
      </div>
    </section>

    <!-- 技术教程区域 -->
    <section class="creation-section">
      <h2 class="section-title">技术<span class="highlight">教程</span></h2>
      <div class="creation-cards">
        <div class="creation-card" v-for="(card, index) in creationCards" :key="index">
          <div class="card-image" :style="{backgroundImage: `url('${card.imageUrl}')`}"></div>
          <h3 class="card-title">{{ card.title }}</h3>
          <p class="card-desc">{{ card.description }}</p>
        </div>
      </div>
      <router-link to="/tutorials">
        <button class="view-more-btn">查看更多</button>
      </router-link>
    </section>

    <!-- 阅读与思考区域 -->
    <section class="reading-section">
      <h2 class="section-title">阅读与<span class="highlight">思考</span></h2>
      <div class="reading-cards">
        <div class="reading-card" v-for="(card, index) in readingCards" :key="index">
          <div class="user-avatar"></div>
          <div class="card-content">
            <h3 class="card-title">{{ card.title }}</h3>
            <p class="card-meta">{{ card.author }} · {{ card.date }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { RouterLink } from 'vue-router'

// 滚动到第二屏幕函数（平滑版）
const scrollToSecondScreen = () => {
  const secondScreen = document.querySelector('.platform-section');
  if (secondScreen) {
    // 使用原生scrollIntoView并配置behavior为'smooth'
    // 现代浏览器已针对此进行了优化，通常提供最平滑的体验
    secondScreen.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
}

const medias = reactive([
  {
    title: '微信',
    image: '/static/medias/weixin.png'
  },
  {
    title: '小红书',
    image: '/static/medias/xiaohongshu.png',
    url: 'https://www.xiaohongshu.com/user/profile/607d14d20000000001008c8c'
  },
  {
    title: '哔哩哔哩',
    image: '/static/medias/bilibili.png',
    url: 'https://space.bilibili.com/700473147'
  },
  {
    title: '抖音',
    image: '/static/medias/douyin.png',
    url: 'https://www.douyin.com/user/MS4wLjABAAAAL33ckh7UGX6AKlxlhWTy3khqeYf7bP3CVH5RFv_Q_h4'
  },
  {
    title: '视频号',
    image: '/static/medias/shipinhao.png'
  },
  {
    title: '掘金',
    image: '/static/medias/juejin.png',
    url: 'https://juejin.cn/user/3868524948238876'
  },
  {
    title: '知乎',
    image: '/static/medias/zhihu.png',
    url: 'https://www.zhihu.com/people/zhangpeng-62'
  },
  {
    title: '公众号',
    image: '/static/medias/gongzhonghao.png'
  },
  {
    title: 'CSDN',
    image: '/static/medias/csdn.png',
    url: 'https://blog.csdn.net/purplesky95'
  }
])

// 技术教程卡片数据
const creationCards = reactive([
  {
    title: "Nginx使用手册",
    description: "全面介绍Nginx的配置与优化技巧",
    imageUrl: "/photos/photo1.svg"
  },
  {
    title: "MySQL使用手册",
    description: "MySQL数据库的安装、配置与最佳实践",
    imageUrl: "/photos/photo2.svg"
  },
  {
    title: "Linux系统管理",
    description: "Linux系统的常用命令与管理技巧",
    imageUrl: "/photos/photo3.svg"
  },
  {
    title: "Docker容器化",
    description: "Docker容器的使用与部署实战",
    imageUrl: "/photos/photo4.svg"
  },
  {
    title: "Git版本控制",
    description: "Git的基础操作与团队协作最佳实践",
    imageUrl: "/photos/photo5.svg"
  },
  {
    title: "JavaScript高级编程",
    description: "JavaScript深入理解与高级特性详解",
    imageUrl: "/photos/photo6.svg"
  }
])

// 阅读与思考卡片数据
const readingCards = reactive([
  {
    title: "程序员的成长路径",
    author: "张小明",
    date: "2023-06-15"
  },
  {
    title: "如何保持代码质量",
    author: "李华",
    date: "2023-05-28"
  },
  {
    title: "技术领导力培养",
    author: "王强",
    date: "2023-04-10"
  },
  {
    title: "远程工作经验分享",
    author: "赵阳",
    date: "2023-03-05"
  }
])
</script>

<style lang="scss" scoped>
// 基础样式
$primary-color: #00ff9d;
$secondary-color: #00a3ff;
$dark-bg: #111111;
$card-bg: rgba(10, 25, 47, 0.7);
$text-color: #e2e8f0;
$highlight-color: #00ff9d;
$glow-effect: 0 0 10px $primary-color, 0 0 20px rgba(0, 255, 157, 0.3);

.page-container {
  background-color: $dark-bg;
  color: $text-color;
  min-height: 100vh;
  overflow: hidden;
}

// 英雄区域样式
.hero-section {
  background-color: transparent;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .hero-content {
    position: relative;
    text-align: center;
    z-index: 1;

    .main-title {
      font-size: 4.5rem;
      margin-bottom: 1rem;
      color: white;
      text-shadow: $glow-effect;
      letter-spacing: 2px;
    }

    .subtitle {
      font-size: 1.8rem;
      margin-bottom: 2.5rem;
      color: $text-color;
      opacity: 0.85;
    }

    .explore-btn {
      padding: 0.8rem 2.5rem;
      background: linear-gradient(135deg, $primary-color, $secondary-color);
      border: none;
      border-radius: 30px;
      color: $dark-bg;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: $glow-effect;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 15px $primary-color, 0 0 30px rgba(0, 255, 157, 0.5);
      }
    }
  }
}

// 平台区域样式
.platform-section {
  padding: 3rem 2rem;
  text-align: center;

  .section-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: white;

    .highlight {
      color: $highlight-color;
      // text-shadow: $glow-effect;
    }
  }

  .section-desc {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: $text-color;
    opacity: 0.85;
  }

  .platform-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;

    .platform-card {
      width: 160px;
      height: 190px;
      background-color: #1e1e1e;
      border-radius: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(0, 255, 157, 0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 255, 157, 0.15);
        border-color: $primary-color;
      }

      .card-icon {
        width: 84px;
        height: 84px;
        margin-bottom: 1rem;
        background-color: rgba(0, 255, 157, 0.1);
        border-radius: 1rem;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
          width: 30px;
          height: 30px;
          fill: $primary-color;
        }
      }

      .card-name {
        font-size: 1rem;
        color: white;
        font-weight: 500;
      }
    }
  }
}

// 技术教程区域样式
.creation-section {
  padding: 5rem 2rem;
  text-align: center;

  .section-title {
    font-size: 2.2rem;
    margin-bottom: 3rem;
    color: white;

    .highlight {
      color: $highlight-color;
      // text-shadow: $glow-effect;
    }
  }

  .creation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 3rem;

    .creation-card {
      background-color: $card-bg;
      border-radius: 10px;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 1px solid rgba(0, 255, 157, 0.1);

      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 255, 157, 0.15);
        border-color: $primary-color;
      }

      .card-image {
          background-size: cover;
          background-position: center;
          height: 180px;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
          }
      }

      .card-title {
        padding: 1.5rem 1.5rem 0.5rem;
        font-size: 1.2rem;
        color: $highlight-color;
      }

      .card-desc {
        padding: 0 1.5rem 1.5rem;
        opacity: 0.8;
        font-size: 0.95rem;
      }
    }
  }

  .view-more-btn {
    padding: 0.7rem 2rem;
    background: transparent;
    border: 1px solid $primary-color;
    border-radius: 30px;
    color: $primary-color;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background-color: rgba(0, 255, 157, 0.1);
      box-shadow: $glow-effect;
    }
  }
}

// 阅读与思考区域样式
.reading-section {
  padding: 5rem 2rem 8rem;
  text-align: center;

  .section-title {
    font-size: 2.2rem;
    margin-bottom: 3rem;
    color: white;

    .highlight {
      color: $highlight-color;
      text-shadow: $glow-effect;
    }
  }

  .reading-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;

    .reading-card {
      background-color: $card-bg;
      border-radius: 10px;
      padding: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      transition: all 0.3s ease;
      border: 1px solid rgba(0, 255, 157, 0.1);

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 255, 157, 0.1);
        border-color: $primary-color;
      }

      .user-avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-image: url('/avatar.jpg');
          background-size: cover;
          background-position: center;
          flex-shrink: 0;
        }

      .card-content {
        text-align: left;

        .card-title {
          font-size: 1.1rem;
          margin-bottom: 0.5rem;
          color: white;
        }

        .card-meta {
          font-size: 0.85rem;
          opacity: 0.7;
        }
      }
    }
  }
}

// 动画效果
@keyframes gridMove {
  0% {
    background-position: 0 0, 25px 25px;
  }
  100% {
    background-position: 50px 50px, 75px 75px;
  }
}
</style>